<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超级贪吃蛇 - 创新版</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
    <div class="game-container">
        <!-- 游戏标题 -->
        <h1 class="game-title">超级贪吃蛇</h1>
        
        <!-- 游戏信息区域 -->
        <div class="game-info">
            <div class="score-board">
                <div class="score-item">
                    <span class="score-label">分数:</span>
                    <span class="score-value" id="score">0</span>
                </div>
                <div class="score-item">
                    <span class="score-label">长度:</span>
                    <span class="score-value" id="length">1</span>
                </div>
                <div class="score-item">
                    <span class="score-label">关卡:</span>
                    <span class="score-value" id="level">1</span>
                </div>
            </div>
            
            <!-- 游戏控制按钮 -->
            <div class="game-controls">
                <button id="start-btn" class="control-btn">开始游戏</button>
                <button id="pause-btn" class="control-btn">暂停</button>
                <button id="reset-btn" class="control-btn">重置</button>
                <button id="sound-btn" class="control-btn">🔊 音效</button>
            </div>
        </div>
        
        <!-- 游戏画布容器 -->
        <div class="canvas-container">
            <canvas id="gameCanvas" class="game-canvas"></canvas>
        </div>
        
        <!-- 游戏提示和说明 -->
        <div class="game-messages">
            <div id="gameStatus" class="status-message">按空格键或点击开始按钮开始游戏！</div>
            <div class="game-instructions">
                <h3>游戏说明:</h3>
                <ul>
                    <li>使用方向键或WASD控制蛇的移动方向</li>
                    <li>吃食物可以增长蛇身并获得分数</li>
                    <li>特殊食物有不同的效果</li>
                    <li>撞到墙壁或自己的身体游戏结束</li>
                    <li>随着关卡提升，游戏速度会增加</li>
                </ul>
            </div>
        </div>
        
        <!-- 移动设备控制按钮 -->
        <div class="mobile-controls">
            <div class="control-row">
                <button class="arrow-btn" id="up-btn">↑</button>
            </div>
            <div class="control-row">
                <button class="arrow-btn" id="left-btn">←</button>
                <button class="arrow-btn" id="down-btn">↓</button>
                <button class="arrow-btn" id="right-btn">→</button>
            </div>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html>